<template>
	<view class="verification">
		<u-navbar title="扫码核销" :border-bottom="false" :custom-back="cBack"></u-navbar>
		<view class="tips1">
			<view class="tips11">
				服务站:
				<view>{{ info.fwz_title }}<span style="padding: 0 10rpx;">·</span>服务站</view>
				<img src="../../static/dw.png" alt="" @click="dh" />
			</view>
		</view>
		<view class="tips2">
			联系电话:
			<view>{{ info.fwz_tel }}</view>
			<img src="../../static/dianhua3.png" alt="" @click="dianhua(info.fwz_tel)" />
		</view>
		<view v-if="list.length > 0">
			<u-radio-group v-model="valueKey" @change="radioGroupChange" :size="40">
				<view class="i" v-for="(item, index) in list" :key="index">
					<view class="l">
						<u-radio @change="radioChange" :name="item.id"></u-radio>
						<view class="lr" @click="RadioCli(item)">
							<view class="name">{{ item.goods_title }}</view>
							<view class="num">
								共{{ item.nums }}张
								<view class="c">(已核销{{ item.max_num - item.sy_num }}次)</view>
							</view>
						</view>
					</view>
					<view class="r">
						<view class="r_text">本次核销次数</view>
						<view><u-number-box v-model="mtvalue" @change="NumberBox" :index="index" :disabled-input="true" :min="1" :max="item.sy_num"></u-number-box></view>
					</view>
				</view>
			</u-radio-group>
			<!-- <view class="t" v-if="valueKey">
				<view class="t1">
					订单金额：
					<view class="c">￥{{ item.xj_sprice }}</view>
				</view>
				<view class="t2">下单时间1：{{ item.create_time }}</view>
				<view class="t3">
					订单编号：{{ item.order_num }}
					<view class="t3b" @click="copy(item.order_num)">复制</view>
				</view>
			</view> -->
		</view>
		<view class="kong" v-else>
			<view class="r_k_z">
				<img src="../../static/gb.png" alt="" />
				<view>没有核销商品</view>
			</view>
		</view>
		<view class="bt" @click="submit">确认核销</view>
	</view>
</template>

<script>
import { hxorder, saomaHxList } from '../../libs/axios.js';
import _ from 'lodash';
export default {
	data() {
		return {
			id: '',
			valueKey: '',
			value: 1,
			mtvalue: 1,
			checked: false,
			info: {
				fwz_title: '',
				fwz_tel: '',
				goods_title: '',
				nums: '',
				xj_sprice: '',
				create_time: '',
				order_num: ''
			},
			list: [],
			form: {}
		};
	},
	onLoad(option) {
		if (option.fwz_id) {
			this.id = option.fwz_id;
			this.fwzList();
		} else {
			this.info = JSON.parse(option.item);
			this.info.numsz = this.info.nums;
			this.list.push(this.info);
		}
	},
	methods: {
		RadioCli(item) {
			console.log(item);
			this.list.forEach((item) => {
				if (item.id === this.valueKey) {
					this.form.id = item.id;
					this.form.value = item.numsz;
				}
			});
		},
		cBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		NumberBox(e) {
			this.list[Number(e.index)].numsz = e.value;

			console.log(e);
		},
		radioGroupChange(e) {
			console.log(e);
		},
		radioChange(e) {
			this.list.forEach((item) => {
				if (item.id === e) {
					this.form.id = item.id;
					this.form.value = item.numsz;
				}
			});
			console.log(this.form);
		},
		copy(text) {
			uni.setClipboardData({
				data: text,
				success: function () {
					console.log('success');
				}
			});
		},
		async fwzList() {
			let info = await saomaHxList({ fwz_id: this.id });
			this.info.fwz_title = info.data.fwz_info.title;
			this.info.fwz_tel = info.data.fwz_info.kefu_tel;
			this.info.fwz_location_x = info.data.fwz_info.location_x;
			this.info.fwz_location_y = info.data.fwz_info.location_y;
			this.list = info.data.order_list;
			this.list.forEach((itme) => {
				itme.numsz = itme.nums;
			});
			console.log(this.list);
		},
		submit: _.debounce(
			async function () {
				let info = await hxorder({
					order_id: this.form.id,
					hx_nums: this.mtvalue
				});
				console.log(info);
				uni.showToast({
					title: '核销成功!',
					icon: 'success',
					duration: 2000
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/WriteOffResult/WriteOffResult?info=' + JSON.stringify(info.data)
					});
				}, 2000);
			},
			1000,
			{
				leading: true, //在延迟开始前立即调用事件
				trailing: false //在延时结束后不调用,保证事件只被触发一次
			}
		),
		dh() {
			uni.openLocation({
				latitude: Number(this.info.fwz_location_x),
				longitude: Number(this.info.fwz_location_y),
				success: function () {
					console.log('success');
				}
			});
		},
		dianhua(tel) {
			uni.makePhoneCall({
				phoneNumber: tel + '',
				success: () => {},
				fail: () => {}
			});
		}
	}
};
</script>

<style lang="scss">
.verification {
	margin: 0 32rpx;
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	.tips1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		.tips11 {
			display: flex;
			align-items: center;
			font-size: 35rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			view {
				margin-left: 20rpx;
			}
			img {
				width: 30rpx;
				height: 30rpx;
				margin-left: 10rpx;
			}
		}
		.c {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(255, 67, 73, 1);
		}
	}

	.tips2 {
		display: flex;
		align-items: center;
		font-size: 35rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		padding: 20rpx 0;
		box-sizing: border-box;
		border-bottom: 2rpx solid #eeeeee;
		view {
			margin-left: 20rpx;
		}
		img {
			width: 30rpx;
			height: 30rpx;
			margin-left: 10rpx;
		}
	}
	.kong {
		.r_k_z {
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(119, 119, 119, 1);
			margin-top: 100rpx;
			text-align: center;
			img {
				width: 382rpx;
				height: 244rpx;
			}
		}
	}
	.i {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		box-sizing: border-box;
		.l {
			width: 65%;
			display: flex;
			align-items: center;
			.lr {
				width: 80%;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				.name {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.num {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					display: flex;
					align-items: flex-end;
					margin-top: 10rpx;
					.c {
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(153, 153, 153, 1);
					}
				}
			}
		}
		.r {
			text-align: center;
			.r_text {
				margin-bottom: 10rpx;
			}
		}
	}
	.t {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		box-sizing: border-box;
		.t1 {
			display: flex;
			padding-top: 30rpx;
			border-top: 2rpx solid #eeeeee;
			.c {
				color: rgba(246, 83, 50, 1);
			}
		}
		.t2 {
			color: rgba(153, 153, 153, 1);
			margin-top: 20rpx;
		}
		.t3 {
			color: rgba(153, 153, 153, 1);
			margin-top: 20rpx;
			display: flex;
			.t3b {
				font-size: 20rpx;
				width: 58rpx;
				height: 30rpx;
				border-radius: 4rpx;
				border: 1rpx solid rgb(153, 153, 153);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 20rpx;
			}
		}
	}
	.bt {
		width: 604rpx;
		height: 84rpx;
		border-radius: 196rpx;
		background: rgb(255, 67, 73);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin: 80rpx auto;
	}
}
</style>
